<!DOCTYPE html>
<html>
<head>
    <title>今日时间线</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="木兰湾管理系统">
    <script type="text/javascript" src="../../static/include/header-css.js"></script>
</head>
<body>
<!--导航-->
<div class="weui-tab" style="height:32px;"   id="dataSourceTab">
    <div class="weui-tab-nav">
        <a href="javascript:setDataSource('BEHAVIOR_DATA');" class="weui-navbar__item weui-nav-green"> 行为数据 </a>
        <a href="javascript:setDataSource('OPERATE_DATA');" class="weui-navbar__item weui-nav-green"> 操作数据</a>
    </div>
</div>
<!--上边框-->
<div  class="border-t w" ></div>
<!--查询条件-->
<div>
    <form id="search-form">
        <div class="weui-cell mulanbay_select-before ">
            <div class="weui-cell__hd" >
                <label class="weui-label">日期</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="date" name="date" type="text">
            </div>
            <div class="weui-cell__hd">
                <a href="javascript:searchData()" class="weui-btn weui-btn_mini weui-btn_primary">查询</a>
            </div>
        </div>
        <input type="hidden" name='dateGroupType' value="TIMELINE"/>
        <input type="hidden" name='dataSource' id="dataSource" value="BEHAVIOR_DATA"/>
    </form>
</div>
<div class="weui-form-preview__ft">
    <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:getCalendarToday()">今天</a>
    <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:getCalendarDev(-1)">前一天</a>
    <a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:getCalendarDev(1)">后一天</a>
</div>
<!--下边框-->
<div  class="border-b w" ></div>
<div class="timeline">
    <ul>
        <!--列表数据显示-->
        <div id="dataContent">

        </div>
    </ul>
</div>

<div class="button_sp_area" align="center">
    <a href="javascript:gotoTop();" class="weui-btn weui-btn_mini weui-btn_primary">返回顶部</a>
</div>
<br>
<script type="text/javascript" src="../../static/include/footer-js.js"></script>
<script>
    $(function() {
        $("#date").calendar({
            //初始值无效
            dateFormat: 'yyyy-mm-dd',
            onChange: function (p, values, displayValues) {
                if(values!=$('#date').val()){
                    //此时表单中的值还没有被改变需要手动设置
                    document.getElementById('date').value=values;
                    searchData();
                }
            }
        });
        $('#dataSourceTab').tab({defaultIndex:0,activeClass:"bg-green"});
        $('#date').val(getNowDateString());
        getData();
    });
    function getCalendarToday() {
        $('#date').val(getNowDateString());
        getData();
    }
    function getCalendarDev(n) {
        var date = $('#date').val();
        date = getDayByDate(n,date);
        $('#date').val(date);
        getData();
    }
    function setDataSource(dataSource) {
        $('#dataSource').val(dataSource);
        getData();
    }
    function searchData() {
        //setPage(1);
        getData();
    }
    function getData() {
        var para = form2Json('search-form');
        if(para.dataSource=='BEHAVIOR_DATA'){
            getBehaviorData(para);
        }else{
            getOperateData(para);
        }
    }
    function getBehaviorData(para) {
        var url = '/userBehavior/stat';
        doAjax(para,url,'GET',false,function(data){
            var cc='';
            if(data.rows){
                var listData = data.rows;
                for (var i = 0; i < listData.length; i++) {
                    cc+=createRow(listData[i],i);
                }
            }
            setElementInnerHTML('dataContent',cc);
        });
    }
    function getOperateData(para) {
        var shPara = {
            startTime:para.date,
            endTime:para.date+' 23:59:59',
            page:0,
            pageSize:10
        };
        var url='/userOperationConfig/userOperationStat';
        doAjax(shPara,url,'GET',false,function(data){
            var cc='';
            var n=0;
            for(var i=0; i<data.length; i++){
                var pdata =data[i].operations;
                for(var j=0;j<pdata.length;j++){
                    var rowData = {
                        id : ++n,
                        behaviorType: pdata[j].behaviorType,
                        date: pdata[j].occurTime,
                        name:pdata[j].content,
                        remark:'无'
                    };
                    cc+=createRow(rowData,i);
                }
            }
            setElementInnerHTML('dataContent',cc);
        });
    }
    function createRow(rowData,index) {
        var html='';
        var hm =rowData.date;
        if(hm.length<=10){
            //一部分数据不支持
            hm='00:00';
        }else{
            hm=hm.substring(11,hm.length-3);
        }
        var name = getImage(rowData.behaviorType)+rowData.name;
        if(index==0){
            html+='<li class="timeline-item">';
            html+='        <div class="timeline-item-color timeline-item-head-first"><i class="timeline-item-checked   weui-icon-success-no-circle"></i>\n';
            html+='        </div>\n';
            html+='        <div class="timeline-item-tail" ></div>\n';
            html+='        <div class="timeline-item-content"><h4 class="recent"> '+name+'</h4>';
            html+='    <p class="recent">'+hm+'</p></div>';
            html+='        </li>\n';
        }else{
            html+='<li class="timeline-item">';
            html+='            <div class="timeline-item-color timeline-item-head"></div>\n';
            html+='            <div class="timeline-item-tail" ></div>\n';
            html+='            <div class="timeline-item-content"><h4> '+name+'</h4>\n';
            html+='                <p>'+hm+'</p></div>\n';
            html+='        </li>\n';
        }
        return html;
    }
    function getImage(behaviorType) {
        var img="common_record.png";
        if(behaviorType=='DIET'){
            img = 'diet.png';
        }else if(behaviorType=='HEALTH'){
            img = 'health.png';
        }else if(behaviorType=='MUSIC'){
            img = 'music.png';
        }else if(behaviorType=='SPORT'){
            img = 'sport.png';
        }else if(behaviorType=='BUY'){
            img = 'buy.png';
        }else if(behaviorType=='READ'){
            img = 'book.png';
        }else if(behaviorType=='LIFE'){
            img = 'life.png';
        }else if(behaviorType=='LOG'){
            img = 'log.png';
        }else if(behaviorType=='WORK'){
            img = 'work.png';
        }
        return '<img src="../../static/image/'+img+'" alt=""  width="16" height="16">';
    }
</script>
</body>
</html>